<script setup lang="ts">
import { useReportStore } from '@/stores'
const goAndOffBedTimeList = useReportStore().report!.monitorInfo.goAndOffBedTimeList

const formatDate = (date: any) => {
  let month = date.getMonth() + 1
  let day = date.getDate()
  let hour = date.getHours()
  let minute = date.getMinutes()
  let second = date.getSeconds()
  month = addZero(month)
  day = addZero(day)
  hour = addZero(hour)
  minute = addZero(minute)
  second = addZero(second)
  return `${month}-${day} ${hour}:${minute}:${second}`
}
const addZero = (num: number) => {
  return num < 10 ? '0' + num : num
}
const back = () => {
  uni.navigateBack({
    delta: 1,
  })
}
</script>

<template>
  <view class="content">
    <view class="title">
      <u-icon name="arrow-left" color="#ffff" size="22" @click="back"></u-icon> 离床/入床详细时间
    </view>
    <scroll-view scroll-y class="scroll-view">
      <view v-for="(item, index) in goAndOffBedTimeList" :key="index" class="row"  >
        {{
          '离床：' +
          formatDate(new Date(item.in + 8 * 60 * 60 * 1000)) +
          ' / 回床：' +
          formatDate(new Date(item.out + 8 * 60 * 60 * 1000))
        }}
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
  font-family: PingFangSC-regular;
  overflow: hidden;
  .content {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: url(@/static/starry2.png) no-repeat;
    background-size: contain;
    .title {
      padding-top: 115.385rpx;
      padding-bottom: 28.846rpx;
      font-size: 34.615rpx;
      color: #ffff;
      text-align: center;
      position: relative;
      .u-icon {
        position: absolute;
        left: 3%;
      }
    }
    .scroll-view {
      overflow: hidden;
      padding-left: 19.231rpx;
      padding-right: 19.231rpx;
      box-sizing: border-box;
      .row{
        display: flex;
        align-items: center;
        height: 71.154rpx;
        justify-content: center;
        font-size: 30.769rpx;
        border-bottom: #eaebec  3.846rpx solid;
      }
    }
  }
}
</style>
